%take-full-height-of-column {
    height: 100%;
    max-height: 100%;
    min-height: 100%;
}

%hide-dragular-transit {
    .gu-transit {
        display: none;
    }
}

.column {
    .column-content {
        box-sizing: border-box;
        text-transform: none;

        .kustom-scroll {
            height: 100%;

            &:not(.has-content) {
                position: absolute;
                width: 100%;
                z-index: 0;
            }
        }

        > .kanban-info {
            font-style: italic;
        }
    }

    &:not(.column-hidden) .column-empty {
        @extend %hide-dragular-transit;

        .ngsb-container {
            @extend %take-full-height-of-column;
        }

        .kanban-items {
            background: transparent url('column-empty.png') no-repeat center 100px;

            &.appending-item {
                background: transparent url('column-empty-drop-default.png') no-repeat center 100px;
            }
        }
    }

    &.column-hidden {
        @extend %hide-dragular-transit;

        .ngsb-container {
            @extend %take-full-height-of-column;
        }

        .kanban-items.appending-item {
            background: transparentize(#000, 0.9);
            width: 100%;
            box-sizing: border-box;
            margin: $kanban-column-header-height 0 0;
            animation: 100ms linear fadeIn;
        }
    }

    .kanban-items {
        margin: 0;
        padding: 0;
        height: inherit;
        list-style-type: none;

        &.has-scrollbar {
            padding: 0 6px 0 0;
        }
    }

    .ngsb-wrap .ngsb-container,
    .ngsb-wrap .ngsb-scrollbar .ngsb-thumb-pos .ngsb-thumb {
        transition: none;
    }

    .ngsb-wrap .ngsb-scrollbar {
        height: calc(100% - #{$kanban-column-header-height} - 10px - #{$kanban-column-footer-height} - 10px);
        margin-top: $kanban-column-header-height + 10px;
        margin-bottom: $kanban-column-footer-height + 10px;
    }

    .ngsb-wrap .ngsb-scrollbar .ngsb-track {
        width: 8px;
        background: none;
    }

    .ngsb-wrap .ngsb-scrollbar .ngsb-thumb-pos {
        .ngsb-thumb {
            background: #CCCCCC;
        }

        &:hover .ngsb-thumb {
            background: #AAAAAA;
        }
    }
}
